<template>
  <el-form @submit.prevent="handleRegister">
    <el-form-item>
      <el-input class="custom-input" v-model="phone" placeholder="输入手机号" />
    </el-form-item>
    <el-form-item>
      <el-input class="custom-input" v-model="username" placeholder="输入用户名" />
    </el-form-item>

    <el-form-item>
      <div class="gender">性别</div>
      <el-radio-group v-model="gender">
        <el-radio value="男">男</el-radio>
        <el-radio value="女">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-input class="custom-input" type="password" v-model="password" placeholder="密码" />
    </el-form-item>
    <el-form-item>
      <el-input
        class="custom-input"
        type="password"
        v-model="confirmPassword"
        placeholder="确认密码"
      />
    </el-form-item>
    <div>
      <el-button class="Regcontainer" :disabled="isLoading" @click="handleRegister">注册</el-button>
    </div>
  </el-form>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useUserStore } from '@/stores/user.js'

const gender = ref('')
watch(gender, (newGender) => {
  console.log('Selected gender:', newGender)
})

const userStore = useUserStore()
const username = ref('')
const password = ref('')
const confirmPassword = ref('')
const phone = ref('')

const handleRegister = () => {
  const userData = {
    logid: username.value,
    logpwd: password.value,
    tel: phone.value,
    gender: gender.value
  }
  console.log(userData)
  if (password.value === confirmPassword.value) {
    userStore.register(userData)
  } else {
    alert('两次密码不一致')
  }
}

const isLoading = computed(() => userStore.isLoading)
</script>

<style scoped>
.Regcontainer {
  width: 100%;
  height: 35px;
  background: rgb(11, 165, 165);
  color: #ffffff;
  border: none;
  outline: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  padding: 10px;
}
.gender {
  margin-right: 10px;
  font-size: 14px;
  font-weight: 600;
}
.custom-form-item {
  font-weight: 600;
  margin-bottom: 15px;
}
</style>
